<template>
    <div class="information">  <!-- 奶霜草莓缤纷 -->
        <!-- 案件信息 -->
        <header>    
            <p class="info-name"><span>案件信息</span><span>{{caseType}}</span></p>
            <p>报案时间: &nbsp;{{caseTime}}</p>
            <p>报案地点: &nbsp;{{caseAddress}}</p>
        </header>

        <!-- 我的信息 对方信息 -->
        <section>
            <div class="my info">
                <p class="info-title">我的信息</p>
                <div class="info-content">
                    <p><span>姓名</span><span>{{caseInfoList[0].name}}</span></p>
                    <p><span>车牌号</span><span>{{caseInfoList[0].carNo}}</span></p>
                    <p><span>责任认定</span><span>{{caseInfoList[0].dutyPercent}}</span></p>
                    <p><span>手机号码</span><span>{{caseInfoList[0].mobile}}</span></p>
                    <p><span>保险公司</span><span>{{caseInfoList[0].company}}</span></p>
                    <p><span>保单号</span><span>{{caseInfoList[0].policyNumber}}</span></p>
                </div>
            </div>
            <div class="other info">
                <p class="info-title">对方信息</p>
                <div class="info-content">
                    <p><span>姓名</span><span>{{caseInfoList[1].name}}</span></p>
                    <p><span>车牌号</span><span>{{caseInfoList[1].carNo}}</span></p>
                    <p><span>责任认定</span><span>{{caseInfoList[1].dutyPercent}}</span></p>
                    <p><span>手机号码</span><span>{{caseInfoList[1].mobile}}</span></p>
                    <p><span>保险公司</span><span>{{caseInfoList[1].company}}</span></p>
                    <p><span>保单号</span><span>{{caseInfoList[1].policyNumber}}</span></p>
                </div>
            </div>
            <div class="other info">
                <p class="info-title">查看事故照片</p>
                <div class="info-content">
                    <ul class="info-ul">
                        <li v-for="(item, index) in caseImgList" :key="index" v-preview="item.src">
                            <div class="info-center">
                                <img :src="item.src" alt="">
                                <p>{{item.text}}</p>
                            </div>
                        </li>
                    </ul>
                </div>
            </div>
        </section>
    </div>
</template>

<script>
import {http} from 'utils/request.js';
import api from '../../api/index.js';
import {getStorage, getUrlParams} from 'utils/commonUtil.js';
export default {
    data() {
        return {
            params: {
                mobile: '',
                accidentNo: ''
            },
            caseType: '已定责',
            caseTime: '',
            caseAddress: '',
            caseInfoList: [
                {
                    name: '',
                    carNo: '',
                    dutyPercent: '',
                    mobile: '',
                    company: '',
                    policyNumber: ''
                },
                {
                    name: '',
                    carNo: '',
                    dutyPercent: '',
                    mobile: '',
                    company: '',
                    policyNumber: ''
                }
            ],             
            caseImgList: []
        }
    },
    mounted() {
        document.title = '报案记录';  
        this.getThisAccidentInfo();
        this.getAccidentPhotoList();
    },
    created() {      
        this.params.mobile = this.$route.query.mobile;
        this.params.accidentNo = this.$route.query.accidentNo;
    },
    methods: {
        getThisAccidentInfo() {
            http.get(api.API_ACCIDENT_DETAIL, {
                accidentNo: this.params.accidentNo
            }).then(((res) => {
                if(res.code=="1") {
                    const carInfoList = res.resultObj.carInfoBeans;
                    const accidentInfo = res.resultObj.accidentInfoBean;
                    this.caseTime = accidentInfo.accidentCreateDateStr;
                    this.caseAddress = accidentInfo.accidentProvince + accidentInfo.accidentCity + accidentInfo.accidentArea + accidentInfo.accidentWhere;
                    if (carInfoList[0].mobile == this.params.mobile) {
                        this.caseInfoList[0].name = carInfoList[0].driverName;
                        this.caseInfoList[0].carNo = carInfoList[0].carNo;
                        this.caseInfoList[0].dutyPercent = carInfoList[0].dutyPercent == 1?'全责':'无责';
                        this.caseInfoList[0].mobile = carInfoList[0].mobile;
                        this.caseInfoList[0].company = carInfoList[0].insuranceNo;
                        this.caseInfoList[0].policyNumber = carInfoList[0].policyNo;
                        
                        this.caseInfoList[1].name = carInfoList[1].driverName;
                        this.caseInfoList[1].carNo = carInfoList[1].carNo;
                        this.caseInfoList[1].dutyPercent = carInfoList[1].dutyPercent == 1?'全责':'无责';
                        this.caseInfoList[1].mobile = carInfoList[1].mobile;
                        this.caseInfoList[1].company = carInfoList[1].insuranceNo;
                        this.caseInfoList[1].policyNumber = carInfoList[1].policyNo;
                    } else {
                        this.caseInfoList[0].name = carInfoList[1].driverName;
                        this.caseInfoList[0].carNo = carInfoList[1].carNo;
                        this.caseInfoList[0].dutyPercent = carInfoList[1].dutyPercent == 1?'全责':'无责';
                        this.caseInfoList[0].mobile = carInfoList[1].mobile;
                        this.caseInfoList[0].company = carInfoList[1].insuranceNo;
                        this.caseInfoList[0].policyNumber = carInfoList[1].policyNo;
                        
                        this.caseInfoList[1].name = carInfoList[0].driverName;
                        this.caseInfoList[1].carNo = carInfoList[0].carNo;
                        this.caseInfoList[1].dutyPercent = carInfoList[0].dutyPercent == 1?'全责':'无责';
                        this.caseInfoList[1].mobile = carInfoList[0].mobile;
                        this.caseInfoList[1].company = carInfoList[0].insuranceNo;
                        this.caseInfoList[1].policyNumber = carInfoList[0].policyNo;
                    }                    
                }
            })).catch((error) =>{
                console.log(error);
            });
        },
        // 获取车辆照片信息
        getAccidentPhotoList() {  
            http.post(api.API_QUERY_PHOTO_LIST, {
                accidentNo: this.params.accidentNo,
                type: "five"
            }).then(((res) => {
                if(res.code == 1) {
                    const imgArr = [];
                    for (var index = 0; index < res.resultObj.length; index++) {   
                        let type = res.resultObj[index].photoType;  
                        imgArr.push({
                            'src' : res.resultObj[index].photoUrl,
                            'text': this.setText(type)
                        });
                    };
                    this.caseImgList = imgArr;
                    this.type = true;
                } else if (res.code == 0) {
                    this.$toast.message({
                        message: res.message,
                        color: '#F57979'
                    });
                } else {
                    alert ("系统异常")
                }
            })).catch((error) => {
                console.log(error);
            })
        },
        setText(obj) {
            if(obj == '01') {
                return '全景照片（车头）';
            } else if (obj == '02') {
                return '全景照片（车尾）';
            } else if (obj == '03') {
                return '近景照片（车头）';
            } else if (obj == '04') {
                return '近景照片（车尾）';
            } else {
                return '其他照片';
            }
        },
    },
}
</script>


<style lang="scss" scoped>
@import "~assets/css/mixin.scss";
.information {
    background-color: #F5F6F8;
    min-height: 100%;
    header {
        height: rem(120);
        background-color: #fff;
        padding: rem(25) 0 rem(5) rem(10);
        box-sizing: border-box;
        .info-name {
           span:first-child{
                color: #555555;
                font-size: rem(22);
                margin-right: rem(10);
            }
            span:last-child {
                display: inline-block;
                font-size: rem(13);
                padding: rem(5) rem(10);
                border-radius: rem(3);
                background-color: #A3C0FF;
                color: #fff;
            }
        }
        p:nth-child(2) {
            margin: rem(8) 0;
        }
        p:not(:first-child) {
            font-size: rem(13);
            color: #CBCBCB;
        }
    }
    section {
        margin-top: rem(15);
        background-color: #fff;
        .info {
            padding: rem(12) rem(10) 0 rem(10);
            box-sizing: border-box;
        }
        .info-title {
            font-size: rem(18);
            color: #555555;
            padding-left: rem(9);
            border-left: rem(4) solid #A3C0FF;
        }
        .info-content {
            >p {
                display: flex;
                justify-content: space-between;
                font-size: rem(16);
                padding: rem(10) 0;
                span:first-child {
                    color: #3D4042;
                }
                span:last-child {
                    color: #8D9093;
                }
            }
            border-bottom: rem(1) solid #EEEEEE;
            .info-ul {
                display: flex;
                flex-wrap: wrap;
                margin-bottom: rem(10);
                li {
                    flex: 0 0 33.333%;
                    background-color: #fff;
                    margin-top: rem(10);
                    .info-center {
                        position: relative;
                        width: rem(105);
                        height: rem(105);
                        margin: 0 auto;
                        img {
                            display: block;
                            width: rem(105);
                            height: rem(105);
                        }
                        p {
                            position: absolute;
                            bottom: 0;
                            width: rem(105);
                            height: rem(20);
                            color: #fff;
                            line-height:rem(20);
                            text-align: center;
                            font-size: rem(12);
                            background-color: rgba(0,0,0,.3)
                        }
                    }
                   
                }
            }
        }
    }
}
</style>
